<template>
	<div class="cell-item-demo1">
		<ynet-cell-item title="余额" addon="可用8000.34" arrow></ynet-cell-item>
		<ynet-cell-item title="余额" addon="可用8000.34"></ynet-cell-item>
		<ynet-cell-item title="使用余额">
			 <ynet-switch slot="right" v-model="open" />
		</ynet-cell-item>
		<ynet-cell-item title="使用余额" disabled>
			 <ynet-switch slot="right" v-model="open1" disabled />
		</ynet-cell-item>
		<ynet-cell-item title="自定义右图标条目">
			<ynet-icon slot="right" name="right" color="#ff0000"></ynet-icon>
		</ynet-cell-item>
		<ynet-cell-item title="自定义右图标条目" arrow>
			<div slot="right" class="right-custom">
				<ynet-tag
						class="right-custom-tag"
						size="small"
						shape="circle"
						sharp="bottom-left"
						type="fill"
						fill-color="linear-gradient(90deg, #FC7353 0%, #FC9153 100%)"
						font-color="#fff"
					>待绑定</ynet-tag>
				<p>文字</p>
			</div>
		</ynet-cell-item>
		<ynet-cell-item title="设置1" arrow>
			<ynet-icon name="setting" slot="left" size="lg"></ynet-icon>
		</ynet-cell-item>
		<ynet-cell-item title="设置2" addon="文字" arrow>
			<ynet-icon name="question" slot="left" size="lg"></ynet-icon>
		</ynet-cell-item>
		<ynet-cell-item title="设置3" arrow no-border>
			<ynet-icon name="wait" slot="left" size="lg"></ynet-icon>
			<div slot="right">
				<i class="dot"></i>
				<span>文字</span>
			</div>
		</ynet-cell-item>
	</div>
</template>
<script>
	import { CellItem, Switch, Icon, Tag } from 'ynet-mobile'
	export default {
		title: '单行列表',
		name: 'cell-item-demo',
		components: {
			[CellItem.name]: CellItem,
			[Switch.name]: Switch,
			[Icon.name]: Icon,
			[Tag.name]: Tag
		},
		data(){
			return {
				open: false,
				open1: true
			}
		}
	}
</script>
<style lang="scss">
	.cell-item-demo1{
		background: #fff;
		padding: 0 .2rem;
		.right-custom{
			position: relative;
			.right-custom-tag{
				position: absolute;
				word-break: keep-all;
				top:-32px;
			}
		}
		.dot{
			display:inline-block;
			width: 16px;
			height: 16px;
			background: red;
			border-radius: 50%;
			overflow:hidden;
		}
	}
</style>